<div class="header" style="padding:80px;text-align:center;background:#1abc9c;color:whiter;">
  <h1 style="font-size:40px;">菜鸟教程网页测试实例</h1>
  <p>创建一个页面。</p>
</div>
 
<div class="navbar" style="overflow:hidden;background-color:#333;">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" class="right">链接</a>
</div>
 
<div class="row">
  <div class="side">
      <h2>关于我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg" style="height:200px;">这边插入图像</div>
      <p>关于我的介绍..</p>
      <h3>更多内容</h3>
      <p>我的更多内容</p>
      <div class="fakeimg" style="height:60px;">这边插入图像</div><br>
      <div class="fakeimg" style="height:60px;">这边插入图像</div><br>
      <div class="fakeimg" style="height:60px;">这边插入图像</div>
  </div>
  <div class="main">
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg" style="height:200px;">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
      <br>
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg" style="height:200px;">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
  </div>
</div>
 
<div class="footer">
  <h2>底部内容</h2>
</div>